<template>
    <div class="mui-content groupDetail mui-scroll-wrapper mgb2">
        <div class="mui-scroll">
            <div class="storeImgWrap">
                <img v-bind:src="enterprise.enterpriseImg" alt="{{enterprise.enterpriseName}}">
            </div>
                <!--门店信息-->
                <div class="slwy-panel store">
                    <div class="panel-content">
                        <div class="panel-title">门店信息</div>
                        <ul class="mui-table-view" id="projectItems">
                            <li class="mui-table-view-cell">
                                <p class="text2-size color1 enterpriseName">{{enterprise.enterpriseName}}</p>
                            </li>
                            <li class="mui-table-view-cell addressWrap">
                                <div class="addressLeft">
                                    <p class="text3-size color2 enterpriseAddress">{{enterprise.enterpriseAddress}}</p>
                                </div>
                                <div class="addressRight">
                                    <a href="javascript:;" @click="handleClickNavi()" class="color3 text1-size">
                                        <i class="mui-icon mui-icon-location color3 text6-size"></i>
                                    </a>
                                </div>
                            </li>
                            <li class="mui-table-view-cell telWrap">
                                <div class="telLeft">
                                    <a class="text3-size color2 enterpriseTel" href="tel:{{enterprise.enterpriseTel}}">{{enterprise.enterpriseTel}}</a>
                                </div>
                                <div class="telRight">
                                    <a href="tel:{{enterprise.enterpriseTel}}" class="color3 text1-size">
                                        <i class="mui-icon mui-icon-phone color3 text6-size"></i>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--企业信息-->
                <div class="slwy-panel companyInfo">
                    <div class="panel-content">
                        <ul class="mui-table-view serviceNetwork">
                            <li class="mui-table-view-cell mui-media mui-text-middle">
                                <div class="mui-pull-left col-6 color1 text2-size mui-text-middle" style="line-height: 0.66rem; height: 0.6rem;">评价</div>
                                <div class="mui-pull-right col-6 color1 text2-size mui-text-right mui-text-middle" style="height: 0.6rem; line-height: 0.6rem;">
                                <span class="stars mui-text-right mui-text-middle">
                                    <em class="star-text">{{enterprise.enterpriseScore|toDou}}</em>
                                    <span class="evaluateStar">
                                        <i v-for="n in Math.floor(enterprise.enterpriseScore)" class="mui-icon mui-icon-star-filled"></i>
                                        <i v-if="Math.ceil(enterprise.enterpriseScore) - Math.floor(enterprise.enterpriseScore) > 0" class="mui-icon mui-icon-starhalf" ></i>
                                        <i v-for="n in (5-Math.ceil(enterprise.enterpriseScore))" class="mui-icon mui-icon-star"></i>
                                    </span>
                                </span>
                                </div>
                            </li>
                            <li class="mui-table-view-cell mui-media">
                                <p class="table-view-cell-title">资质类别</p>
                                <p class="table-view-cell-text">
                                    {{enterprise.enterpriseQualification}}
                                </p>
                            </li>
                            <li class="mui-table-view-cell mui-media">
                                <p class="table-view-cell-title">主修品牌</p>
                                <p class="table-view-cell-text">
                                    <span>{{enterprise.enterpriseBrand}}</span>
                                </p>
                            </li>
                            <li class="mui-table-view-cell mui-media">
                                <p class="table-view-cell-title">企业认证</p>
                                <p class="table-view-cell-text">
                                    <span>{{enterprise.enterpriseCertification}}</span>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--钣喷询价按钮-->
    <div class="fixedOperate">
        <button class="mui-btn mui-btn-primary" @click="toBanpen()">钣喷服务</button>
    </div>
</template>
<style>
    .groupDetail .storeImgWrap { width: 100%; height: 4rem; overflow: hidden;}
    .groupDetail .storeImgWrap img{ display: inline-block; width: 100%;}


    /*门店信息*/
    .groupDetail .store{margin-top: 0.2rem;}
    .addressWrap,.telWrap{display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center;}
    .addressWrap .addressLeft , .telWrap .telLeft{-webkit-box-flex: 1; -ms-box-flex: 1;}
    .addressWrap .addressRight , .telWrap .telRight{width: 1.2rem; text-align: center; border-left: 1px solid #DDD8CE; color: #06c1ae;}
    .addressWrap .addressRight p{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

    .groupDetail .mroInfo .mroImg img {
        display: inline-block;
        width: 100%;
    }

    .groupDetail .mroInfo .mroText p {
        margin-bottom: 0;
    }

    .groupDetail .mroInfo .mroText {
        position: absolute;
        left: 2.5rem;
        padding: 0.1rem 0.3rem;
    }

    /*门店联系方式*/
    .groupDetail .mroContact {
        width: 80%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .groupDetail .mroContact a {
        width: 80%;
    }

    .groupDetail .mroContact .ContactTel a {
        color: #007aff;
        border: 1px solid #007aff;
    }

    .groupDetail .mroContact .Navi a {
        color: #FFF;
        background: #007aff;
    }

    .stars {
        display: inline-block;
        color: #999999;
        vertical-align: middle;
    }

    .stars .evaluateStar {
        display: inline-block;
        vertical-align: middle;
    }

    .stars i {
        margin-right: .2em;
        vertical-align: middle;
        font-size: 0.4rem;
    }
    .stars i:before {
        vertical-align: middle;
    }
    .companyInfo .stars em {
        font-style: normal;
        color: #f90;
        font-size: 0.38rem;
        vertical-align: middle;
        display: inline-block;
    }
    .stars .mui-icon-star-filled{
        color: #f90;
    }


</style>
<script type="text/ecmascript-6">
    import '../../fonts/mui.css';
    import Page from '../../base/Page';
    import { API } from '../../config/constants';
    import wechat from '../../libs/wechat'
    export default new Page({
        vuex: {
            actions: {
                selectEnterPrise: function ({dispatch}, data) {
                    dispatch('SELECT_ENTERPRISE', data);
                }
            },
            getters: {
                enterpriseFlag: function (state) {
                    return state.enterpriseFlag;
                }
            }
        },
        data(){
            return {
                enterprise: {}
            }
        },
        methods: {
            toBanpen: function () {
                var enterprise = {'id': this.$route.params.id, 'name': this.enterprise.enterpriseName};
                //save order enterprise
                this.selectEnterPrise(enterprise);
                this.$route.router.go('/banpen/step1/')
            },
            handleClickNavi: function () {
                if (!this.enterprise.enterpriseGps) {
                    alert('无地址')
                } else {
                    var coor = this.enterprise.enterpriseGps.split(',');
                    console.log(coor);
                    wechat.openLocation({
                        latitude: parseFloat(coor[0]),
                        longitude: parseFloat(coor[1]),
                        scale: 15,
                        name: this.enterprise.enterpriseName,
                        address: this.enterprise.enterpriseAddress
                    });
                }
            }
        },
        ready () {
          wechat.configSDK();
            this.getJSON(
                    API.GET_ENTERPRISE_DETAIL,
                    {id: this.$route.params.id},
                    res => {
                        this.enterprise = res.resultData;                                                                                                                                                                                                                                   console.log(JSON.stringify(this.enterprise));
                        if (this.enterprise.enterpriseCertification != null) {
                            this.enterprise.enterpriseCertification =  this.enterprise.enterpriseCertification.replace(',','  ');
                        }
                    });
            mui('.mui-scroll-wrapper').scroll({
                indicators: true, //是否显示滚动条
                deceleration : 0.0005,
            });

    },
    });
</script>
